<template>
  <q-splitter v-model="splitterModel" separator-class="bg-transparent">
    <template v-slot:before>
      <q-tabs
        v-model="tab"
        vertical
        active-color="accent"
        indicator-color="accent"
        class="text-grey-7 q-pa-sm"
      >
        <q-tab
          name="user"
          icon="supervisor_account"
          :label="$t('userIndex.text1')"
        />
        <q-tab
          name="role"
          icon="supervised_user_circle"
          :label="$t('userIndex.text2')"
        />
      </q-tabs>
    </template>

    <template v-slot:after>
      <q-tab-panels
        v-model="tab"
        animated
        vertical
        transition-prev="jump-up"
        transition-next="jump-up"
        class="bg-transparent"
        style="height: calc(100vh - 50px)"
      >
        <user-manage name="user" class="full-height" />
        <role-manage name="role" />
      </q-tab-panels>
    </template>
  </q-splitter>
</template>

<script setup>
import { ref } from "vue";
import UserManage from "pages/user/UserManage.vue";
import RoleManage from "pages/user/RoleManage.vue";

const splitterModel = ref(10);
const tab = ref("user");
</script>

<style scoped></style>
